<template lang="pug">
  .loading-wrapper(
    v-show="show"
    :class="bgClass"
    )
    .loading
      span
      span
      span
      span
      span
      span
      span
      span
    .hint {{hint}}
</template>

<script>
export default {
  name: 'loading',
  props: {
    show: {
      type: Boolean,
      default: true
    },
    cheme: {
      type: String,
      default: 'full'
    },
    hint: {
      type: String,
      default: 'loading ...'
    }
  },
  computed: {
    bgClass () {
      let style = ''
      switch (this.cheme) {
        case 'block':
          style = 'loading-block'
          break
        case 'simple':
          style = 'loading-simple'
          break
        default:
          style = 'loading-full'
      }
      return style
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@-webkit-keyframes load
  0%
    opacity: 1
  100%
    opacity: 0.2
.loading-wrapper
  position fixed
  z-index 10000
  text-align center
  .hint
    margin 60px auto 0 auto
    color #aaa
.loading-full
  left 0
  right 0
  top 0
  bottom 0
  background #ccc
  
  .hint
    margin 35vh auto 0 auto
    color #ffffff
  .loading
    top: 30vh
    left calc(50% - 25px)
  span
    background: #fff
.loading-block
  width 100px
  height 100px
  top: 30vh
  left calc(50% - 50px)
  border-radius 10px
  background rgba(0, 0, 0, .5)
  .loading
    top: 25px
    left 25px
  span
    background: #fff
.loading-simple
  width 100px
  height 100px
  top: 30vh
  left calc(50% - 50px)
  border-radius 10px
  .loading
    top: 25px
    left 25px
  span
    background: lightgray
.loading
  position: relative
  width: 50px
  height: 50px
  span
    display: inline-block
    width: 8px
    height: 8px
    border-radius: 50%
    position: absolute
    -webkit-animation: load 1.04s ease infinite
  span:nth-child(1)
    left: 0
    top: 50%
    margin-top:-4px
    -webkit-animation-delay:0.13s
  span:nth-child(2)
    left: 7px
    top: 7px
    -webkit-animation-delay:0.26s
  span:nth-child(3)
    left: 50%
    top: 0
    margin-left: -4px
    -webkit-animation-delay:0.39s
  span:nth-child(4)
    top: 7px
    right:7px
    -webkit-animation-delay:0.52s
  span:nth-child(5)
    right: 0
    top: 50%
    margin-top:-4px
    -webkit-animation-delay:0.65s
  span:nth-child(6)
    right: 7px
    bottom:7px
    -webkit-animation-delay:0.78s
  span:nth-child(7)
    bottom: 0
    left: 50%
    margin-left: -4px
    -webkit-animation-delay:0.91s
  span:nth-child(8)
    bottom: 7px
    left: 7px
    -webkit-animation-delay:1.04s

</style>
